<template>
	<view class="container box">
		<view class="tabs">
			<view class="left">
				<!-- <view :class="['tabs-item', { current: state.current == 1 }]" @click="toggle(1)">推广收益</view> -->
				<view :class="['tabs-item', { current: state.current == 1 }]" @click="toggle(1)">广告收益</view>
				<view :class="['tabs-item', { current: state.current == 3 }]" @click="toggle(3)">激活收益</view>
			</view>
			<view class="right">
				<view class="tabs-item">
					<view class="date">{{ currentDateText }}</view>
					<picker class="date2" mode="date" fields="month" :start="startDate" :end="endDate" :value="currentDate" @change="selectDate">
						<view style="opacity: 0">当前选择</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="layout">
			<view class="list-box">
				<view class="tabs">
					<view :class="['tabs-item', { current: state.active == 0 }]" @click="toggle2(0)">全部</view>
					<view :class="['tabs-item', { current: state.active == 1 }]" @click="toggle2(1)">申请中</view>
					<view :class="['tabs-item', { current: state.active == 2 }]" @click="toggle2(2)">待打款</view>
					<view :class="['tabs-item', { current: state.active == 3 }]" @click="toggle2(3)">已打款</view>
					<view :class="['tabs-item', { current: state.active == 4 }]" @click="toggle2(4)">已拒绝</view>
				</view>
				<view class="list-warp" v-if="state.list.length">
					<view class="list-item" v-for="(item, index) in state.list" :key="index">
						<view class="left">
							<view class="info">
								<view class="label">
									<text class="h4">{{ item.name }}</text>
								</view>
								<view class="time">{{ item.created_at }}</view>
							</view>
						</view>
						<view class="right">
							<view class="status">{{ item.status_text }}</view>
							<view class="money2">¥{{ item.price }}</view>
						</view>
					</view>
				</view>
				<view class="empty" style="height: 70vh" v-else>
					<u-empty text="暂无数据" mode="list"></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { get } from '@/request/index.js';
import { dayjs } from '@/static/dayjs.min.js';

onLoad(() => {
	getListData();
});

const state = reactive({
	current: 1,
	active: 0,
	list: [],
	page: 1,
	totalPage: 1
});
const getListData = async () => {
	uni.showLoading({
		title: '数据请求中···'
	});
	const res = await get('agent/withdraw/list', { type: state.current, status: state.active, time: currentDate.value });
	const { code, data } = res;
	if (code == 200) {
		data.data.map((item) => {
			if (item.status == 1) {
				item.status_text = '申请中';
			} else if (item.status == 2) {
				item.status_text = '待打款';
			} else if (item.status == 3) {
				item.status_text = '已打款';
			} else if (item.status == 4) {
				item.status_text = '已拒绝';
			}
		});
		state.list = data.data;
		state.totalPage = data.last_page;
	}
	uni.hideLoading();
};

//tabs切换
const toggle = (n) => {
	state.current = n;
	state.active = 1;
	state.page = 1;
	getListData();
};
//tab切换
const toggle2 = (n) => {
	state.active = n;
	state.page = 1;
	getListData();
};
let startDate = ref('2025-01');
let endDate = ref(dayjs().format('YYYY-MM'));
let currentDate = ref(dayjs().format('YYYY-MM'));
const selectDate = (e) => {
	const { value } = e.detail;
	currentDate.value = value;
	state.page = 1;
	getListData();
};
const currentDateText = computed(() => {
	return dayjs(currentDate.value).format('YY年M月');
});
</script>

<style scoped lang="scss">
.box {
	.tabs {
		height: 106rpx;
		border-bottom: 2rpx solid #e9e9e9;
	}
	.tabs-item {
		padding: 0 20rpx;
		margin-right: 0;
	}
}
</style>
